<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css"/>
    <title>地图显示 - 区域选取</title>
    <script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../jquery/jquery-migrate-1.1.1.min.js"></script>
    <!--
        <script type="text/javascript" src="mapapi3.8.6.js"></script>-->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="polygon.js"></script>
    <script type="text/javascript">

        // 地图服务地址
        var strURL = "http://192.168.11.233:8780/maptile/googlemaps/roadmap/"

        function LocalMapType() {
        }
        LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
        LocalMapType.prototype.maxZoom = 16;   //地图显示最大级别
        LocalMapType.prototype.minZoom = 4;    //地图显示最小级别
        LocalMapType.prototype.name = "本地";
        LocalMapType.prototype.alt = "显示本地地图数据";
        LocalMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
            var img = ownerDocument.createElement("img");
            img.style.width = this.tileSize.width + "px";
            img.style.height = this.tileSize.height + "px";
            img.src = strURL + zoom + "/" + coord.x + "/" + coord.y + ".png";
            return img;
        };
        var localMapType = new LocalMapType();

        function initialize() {
            var myLatlng = new google.maps.LatLng(36.69571558689667, 117.09051073510739);
            var myOptions = {
                center: myLatlng,
                zoom: 13,
                streetViewControl: false,
                mapTypeControlOptions: {
                    mapTypeIds: [
                        //google.maps.MapTypeId.ROADMAP,
                        //google.maps.MapTypeId.HYBRID,
                        //google.maps.MapTypeId.SATELLITE,
                        //google.maps.MapTypeId.TERRAIN,
                        //'locaMap' //定义地图类型
                    ]
                }
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            map.mapTypes.set('locaMap', localMapType);   //绑定本地地图类型
            //map.setMapTypeId('locaMap');    //指定显示本地地图

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                //draggable:true,
                //icon: 'mapfiles/rotate2.png',
                //animation :google.maps.Animation.DROP,
                title: "这是一个点"
            });

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent("坐标位置:" + marker.getPosition().toUrlValue(6));
                infoWindow.open(map, this);
            });

            /////// 绘制矩形

            var creator = new PolygonCreator(map);

            // 初始化矩形
            var triangleCoords = [];

            var ll = "(36.702803801572976, 117.06424654443356)(36.68532294513613, 117.07300127465817)(36.66714965408092, 117.07351625878903)(36.6707295812113, 117.077292809082)(36.67403398151529, 117.08501757104489)(36.67995401049492, 117.11557329614254)(36.71876709472927, 117.11454332788082)(36.716565458365395, 117.09634722192379)";
            var lls = ll.split(")(");
            for (i = 0; i < lls.length; i++) {
                ll = lls[i].replace(" ", "").replace("(", "").replace(")", "").split(",");
                triangleCoords.push(new google.maps.LatLng(ll[0], ll[1]));
            }

            creator.drawPolygon(triangleCoords);

            // 单击矩形
            google.maps.event.addListener(creator.getPolygon(), 'click', function (event) {
                // Since this polygon has only one path, we can call getPath()
                // to return the MVCArray of LatLngs.
                var vertices = this.getPath();

                var contentString = '<b>当前区域</b><br>';

                // Iterate over the vertices.
                for (var i = 0; i < vertices.getLength(); i++) {
                    var xy = vertices.getAt(i);
                    contentString += xy.lat() + ', ' + xy.lng() + '; ';
                }

                contentString += '<br/><br/>';

                // Replace the info window's content and position.
                infoWindow.setContent(contentString);
                infoWindow.setPosition(event.latLng);

                infoWindow.open(map);
            });

            // 清除区域坐标
            $('#reset').click(function () {
                creator.destroy();
                creator = null;
                creator = new PolygonCreator(map);
            });

            // 显示区域坐标
            $('#showData').click(function () {
                $('#dataPanel').empty();
                if (creator.getData() == "") {
                    $('#dataPanel').append('当前点坐标：' + creator.getDot());
                } else {
                    $('#dataPanel').append('当前区域坐标：' + creator.getData());
                }
            });

            /////////////////

        }
    </script>
</head>
<body onload="initialize()">
<div style="height:100%">
    <div id="side">
        <input id="reset" value="清除区域坐标" type="button" class="navi"/>
        <input id="showData" value="显示区域坐标" type="button" class="navi"/>

        <div id="dataPanel">&nbsp;</div>
    </div>
    <div id="map_canvas" style="height:90%"></div>
</div>
</body>
</html>
